<template>
  <div class="title">jmx工具集合-求取每日中值问题</div>
  <div class="tools">上传excel</div>
  <div class="uploadBox">
    <el-upload class="upload-demo" drag action="" :before-upload="beforeUpload">
      <el-icon class="el-icon--upload"><upload-filled :style="{ color: hasUpload ? '#5a9cf8' : '' }" /></el-icon>
      <div class="el-upload__text" v-if="!hasUpload">拖拽文件到这里 或者 <em>点击上传</em></div>
      <div v-else class="el-upload__text">
        <em>上传成功，可重新上传</em>
      </div>
    </el-upload>
  </div>
  <div>
    <div class="tools">操作栏</div>
    <div class="subTitle">
      <div v-if="!hasUpload" class="noFile">
      <span class="userName">江江江</span> 同学, 使用该功能前,请先上传excel噢！
    </div>
    <div v-else>
      请选择需要求取的属性：
    </div>
    <div>
      <el-checkbox-group v-model="itemSelect">
        <el-checkbox v-for="city in itemArr" :key="city" :label="city">{{ city }}</el-checkbox>
      </el-checkbox-group>
    </div>

    <div class="exportBtn">
      <el-button v-if="itemSelect.length > 0" type="primary" plain @click="doCenter">处理数据</el-button>
      <el-button v-if="hasDoCenter" type="primary" plain @click="toggleShowOnlne">在线查看</el-button>
      <el-button v-if="hasDoCenter" type="primary" plain @click="exportCenterNumber">导出excel数据</el-button>
      <!-- <el-button v-if="hasDoCenter" type="primary" plain
          @click="doEchart"
          >生成图表</el-button> -->
    </div>
    <div class="tableOnline" v-if="showTableCenterOnline">
      <el-table :data="exportDoArr" border style="width: 100%">
        <el-table-column v-for="item in tableDataKeys" :prop="item" :label="item" />
      </el-table>
    </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { getExcel, exportByExcel } from '@/utils/common'
import { ElMessage } from 'element-plus'

// 是否上传excel文件
const hasUpload = ref(false)

// 上传的excel数据
const allData = ref([] as any)

const beforeUpload = (data: any) => {
  // 初始化数据
  doInit()
  getExcel(data)
    .then((res: any) => {
      console.log(res)
      ElMessage({
        message: '上传成功～',
        type: 'success'
      })
      hasUpload.value = true
      allData.value = res
      getKeys(res)
    })
    .catch((res) => {
      console.log(res)
    })
}

const hasDoCenter = ref(false)

const getCurrentKey = (date: any) => {
  const currentDate = new Date(date)

  currentDate.setMinutes(currentDate.getMinutes() + 1)
  // 获取当前年份
  const currentYear = currentDate.getFullYear()
  // 获取当前月份（注意月份是从0开始的，所以要加1）
  const currentMonth = currentDate.getMonth() + 1

  const currentday = currentDate.getDate()

  return currentYear + '-' + currentMonth + '-' + currentday
}

// 当前所有key
const itemArr = ref([] as any)
// 选中的key
const itemSelect = ref([] as any)

// 获取所有的key
const getKeys = (arr: any) => {
  for (let i in arr[0]) {
    itemArr.value.push(i)
  }
}

// 导出中值
const doCenter = () => {
  // 1. 按照月份进行分类
  exportDoArr.value = []
  let obj: any = {}
  allData.value.forEach((ele: any, index: any) => {
    // 1. 获取当前天的时间节点
    if (index % 24 === 0) {
      if (index !== 0) {
        for (let i in obj) {
          if (i !== 'timer') {
            obj[i] = obj[i] / obj[i + 'index']
          }
        }
        exportDoArr.value.push({ ...obj })
        obj = {}
      }
      for (let i in ele) {
        if (itemSelect.value.includes(i + '')) {
          obj[i] = ele[i]
          obj[i + 'index'] = 0
        }
      }
      obj.timer = getCurrentKey(ele.time)
    } else {
      for (let i in obj) {
        if (i !== 'timer') {
          if (ele[i]) {
            obj[i] = obj[i] + ele[i]
            obj[i + 'index'] = obj[i + 'index'] + 1
          }
        }
      }
    }
  })
  console.log(exportDoArr.value, 'arr')
  hasDoCenter.value = true
  tableDataKeys.value = ['timer', ...itemSelect.value]
}
// 查看table表格
const exportDoArr = ref([] as any)

const tableDataKeys = ref([] as any)

const exportCenterNumber = () => {

  exportByExcel(exportDoArr.value, tableDataKeys.value)
}

const doInit = () => {
  hasUpload.value = false
  showTableCenterOnline.value = false
  itemSelect.value = []
  itemArr.value = []
}
const showTableCenterOnline = ref(false)

const toggleShowOnlne = () => {
  showTableCenterOnline.value = !showTableCenterOnline.value
}
</script>
<style scoped lang='less'>
.title {
  margin-bottom: 50px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Poppins;
  font-weight: 700;
  color: white;
  background: linear-gradient(45deg,  thistle 20%, rgb(237, 230, 230) 50%, rgb(155, 119, 119) 90%);
  line-height: 70px;
}

.uploadBox {
  padding: 15px 20px;

}

.tools {
  padding: 5px 20px;
  font-size: 20px;
  background: linear-gradient(45deg,  thistle 20%, rgb(237, 230, 230) 50%, white 90%);
  color: white;
}

.subTitle {
  padding: 15px 20px;
}
.exportBtn{
  margin-top: 20px;
}
.tableOnline{
  margin-top: 20px;
}
.noFile{
  font-size: 20px;
  color: chocolate;
  .userName{
    text-decoration: underline;
  }
}
.echarts{
  padding: 15px 20px;
  .echartBox{
    width: 1000px;
    height: 500px;
    margin: 0 auto;
  }
}
</style>
